<template>
  <div class="dashboard">
    <h2>欢迎使用 Spring Cloud Alibaba 管理后台</h2>
    
    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <i class="el-icon-user stat-icon" style="color: #409EFF;"></i>
            <div class="stat-content">
              <div class="stat-value">{{ stats.userCount }}</div>
              <div class="stat-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <i class="el-icon-s-order stat-icon" style="color: #67C23A;"></i>
            <div class="stat-content">
              <div class="stat-value">{{ stats.orderCount }}</div>
              <div class="stat-label">订单总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <i class="el-icon-goods stat-icon" style="color: #E6A23C;"></i>
            <div class="stat-content">
              <div class="stat-value">{{ stats.productCount }}</div>
              <div class="stat-label">商品总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <i class="el-icon-bank-card stat-icon" style="color: #F56C6C;"></i>
            <div class="stat-content">
              <div class="stat-value">{{ stats.paymentCount }}</div>
              <div class="stat-label">支付总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 30px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>系统信息</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="Spring Boot">3.5.7</el-descriptions-item>
            <el-descriptions-item label="Spring Cloud Alibaba">2023.0.1.0</el-descriptions-item>
            <el-descriptions-item label="Nacos">2.3.2</el-descriptions-item>
            <el-descriptions-item label="Sentinel">1.8.8</el-descriptions-item>
            <el-descriptions-item label="Seata">2.0.0</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>快捷操作</span>
          </div>
          <el-button-group style="display: flex; flex-wrap: wrap; gap: 10px;">
            <el-button icon="el-icon-user" @click="$router.push('/user')">用户管理</el-button>
            <el-button icon="el-icon-s-order" @click="$router.push('/order')">订单管理</el-button>
            <el-button icon="el-icon-goods" @click="$router.push('/product')">商品管理</el-button>
            <el-button icon="el-icon-bank-card" @click="$router.push('/payment')">支付管理</el-button>
          </el-button-group>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        userCount: 1234,
        orderCount: 5678,
        productCount: 890,
        paymentCount: 4321
      }
    };
  },
  mounted() {
    // 可以在这里加载实际的统计数据
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard h2 {
  margin-bottom: 20px;
  color: #303133;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stat-icon {
  font-size: 48px;
  margin-right: 20px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.el-button-group {
  display: flex;
  flex-wrap: wrap;
}

.el-button-group .el-button {
  margin-bottom: 10px;
}
</style>
